<template>
    <div class="thingsList">

        <div class="pageTitle" > 
            <span @click="goHome" class="goBack">{{'<'}}</span>
            <div class="title">事项清单</div> 
        </div>

        <div>
            <ul class="nailList">
                <li 
                    v-for="(item,index) in nailPaper" :key="index" 
                    :style="{backgroundColor:item.nailBgColor}"
                    @click="goToDetail"
                >
                    <img :src="item.nail" alt="">
                    <span class="navTitle" :style="{fontSize: item.title=='+' ? '30px' : ''}">{{item.title}}</span>
                </li>
            </ul>
        </div>
          
    </div>
    
</template>

<script setup lang="ts">

import {useRouter} from  'vue-router'


import blueNail from '@/assets/imgs/nail/blueNail.png'
import pinkNail from '@/assets/imgs/nail/pinkNail.png'
import purpleNail from '@/assets/imgs/nail/purpleNail.png'
import yellowNail from '@/assets/imgs/nail/yellowNail.png'

const router = useRouter()

const nailPaper = [
    {
        nail:blueNail,
        nailBgColor:'#cce1e2',
        title:'运动'

    },

    {
        nail:pinkNail,
        nailBgColor:'#dec8d5',
        title:'运动'
    },
    
    {
        nail:purpleNail,
        nailBgColor:'#cecdec',
        title:'运动'
    },
    
    {
        nail:yellowNail,
        nailBgColor:'#d5d4b6',
        title:'运动'
    },
     {
        nail:blueNail,
        nailBgColor:'#cce1e2',
        title:'+'

    },
    
]


const goToDetail=()=>{
    router.push('/things-detail')
}

const goHome=()=>{
    router.push('/home')
}

</script>

<style lang="less" scoped>

    .thingsList{
        width: 100%;
        box-sizing: border-box;
        background-color: #546b4f;
        min-height: calc(100vh);

        padding:0 20px;

        .pageTitle{

            position: relative;
            font-size: 30px;
            padding-top: 20px;
            .goBack{
                position: absolute;
                left: 0;
                text-align: left;
                color: #dbdbdb;
                font-weight: bolder;
            }

            .title{
                color:#dbdbdb;
                font-weight: bolder;
                font-size: 35px;
                letter-spacing: 10px;
                text-shadow: 3px 0px 2px black;
            }

        }


        
        .nailList{

            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 30px;

            margin-top:35px;

            li{
                position: relative;
                height: 140px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    position: absolute;
                    width: 40px;
                    top:-20px;

                }

                .navTitle{

                }
            }
        }

        @media (max-width:575px) {
            .nailList{
                grid-template-columns: repeat(3,1fr);
                gap:20px;
                li{
                    height: 120px;
                    img{
                        width: 30px;
                        top:-15px;
                    }
                }
            }            
        }
    }

</style>